<template>
  <div class="engineering">
    <el-row>
      <el-col :span="8" v-for="(item, index) in images" :key="index">
        <div
          v-if="en"
          @click="particulars(index)"
          class="grid-content bg-purple"
        >
          <el-card class="box-ca rd i">
            <div class="y">
              <img :src="item.url" />
              <span>{{ item.title }}</span>
            </div>
          </el-card>
        </div>
        <div v-else class="grid-content bg-purple z">
          <el-card class="box-ca rd h">
            <div @click="particulars(item.title)" class="grid-contentimage">
              <img :src="item.url" />
              <div>{{ item.title }}</div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "engineering",
  props: {
    images: {
      type: Array,
      default() {
        return [];
      },
    },
    tocase: {
      type: Boolean,
      default: false,
    },
    en: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    particulars(e) {
      switch (e) {
        case "WSF水利水电工程环境管理体系认证":
          this.$router.push("/certification/environmental");
          break;
        case "WSF水利水电工程职业健康安全管理体系认证":
          this.$router.push("/certification/health");
          break;
        case "WSF水利水电工程施工质量管理体系认证":
          this.$router.push("/certification/class");
          break;
        case "安全生产许可":
          this.$router.push("/certification/production");
          break;
        case "建筑企业资质":
          this.$router.push("/certification/enterprise");
          break;
        case "企业信用承诺书":
          this.$router.push("/certification/commitment");
          break;
        default:
          break;
      }
      if (this.tocase) {
        this.$router.push({
          path: `/project/case/${e}`,
        });
      }
    },
    toproject(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.engineering {
  font-size: 18px;
  text-align: center;
  font-weight: normal;
  .z {
    width: 310px;
    height: 100% !important;
  }
  .el-col {
    padding-right: 10px;
    padding-top: 20px;
  }
  .grid-content {
    height: 200px;
    .grid-contentimage {
      > img {
        width: 100%;
        height: 250px;
        padding-bottom: 7px;
      }
    }
  }
}
.y {
  span {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*设置显示的行数*/
    line-clamp: 2; /*设置显示的行数*/
    -webkit-box-orient: vertical;
  }
  > img {
    width: 220px;
    height: 114px;
    padding-bottom: 10px;
  }
}
.i {
  width: 265px;
  height: 210px;
}

.el-col-8 {
  flex: 0;
}
.h {
  width: 300px;
  height: 334px;
}
</style>
